<script setup lang="ts">
import { listFriendLinkVo } from '@/api/friendLink'
import { FriendLink } from '@/api/friendLink/type'
import { addComment, deleteComment, listMessage } from '@/api/comment'
import { ElMessage } from 'element-plus'
import { CommentAddReq, CommentTreeDto } from '@/api/comment/type'
import FriendLinkList from '@/views/link/components/FriendLinkList.vue'
import LinkApplyFormat from '@/views/link/components/LinkApplyFormat.vue'

const friendLinks = ref(<FriendLink[]>[])

const commentList = ref(<Array<CommentTreeDto>>[])
const getDataList = () => {
  listFriendLinkVo().then(({ data: res }) => {
    friendLinks.value = res.data
  })
}

function getListComment() {
  listMessage().then(({ data: res }) => {
    const array = res.data.commentTrees
    for (let i = 0; i < array.length; i++) {
      ;(array[i] as any).replyInputShow = false
    }
    commentList.value = array
  })
}

function vanishDelete(val: any) {
  deleteComment(val.id).then(({ data: res }) => {
    getListComment()
    ElMessage.success(res.msg)
  })
}

function submitComments(val: any) {
  const data: CommentAddReq = {
    parentId: val.parentId,
    articleId: val.articleId,
    content: val.content,
    type: 0,
    source: 'LINK'
  }
  addComment(data).then(({ data: res }) => {
    if (res.code == 200) {
      getListComment()
      ElMessage.success(res.msg)
    } else {
      ElMessage.error(res.msg)
    }
  })
}

onMounted(() => {
  getDataList()
  getListComment()
})
</script>

<template>
  <div class="app-container">
    <div class="container-content">
      <el-card class="box-card" shadow="hover">
        <!--友情连接显示面板-->
        <friend-link-list v-if="friendLinks && friendLinks.length > 0" :data-list="friendLinks" />
        <!-- 申请格式 -->
        <link-apply-format />
        <Comment
          v-if="commentList && commentList.length > 0"
          :data-list="commentList"
          :source="'LINK'"
          @list-comments="getListComment"
          @submit-comments="submitComments"
          @delete-comments="vanishDelete"
        ></Comment>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.box-card {
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
}
</style>

<style scoped lang="scss">
//电脑端
@media screen and (min-width: 760px) {
  .app-container {
    display: flex;
    justify-content: center;
    width: 70%;

    .container-content {
      width: 100%;
    }
  }
}

//手机端
@media screen and (max-width: 759px) {
  .app-container {
    width: 100%;

    .container-content {
      width: 100%;
    }
  }
}
</style>
